import React, {Component} from 'react';
import {
    Button, Platform, StyleSheet,
    Text, TextInput, View,
    Dimensions, TouchableOpacity,
    Animated,
    Image, FlatList,
} from 'react-native';
import CS from "../common/CS";
import WidgetUtils from "../common/WidgetUtils";
import NativeUtils from "../common/NativeUtils";
import ToastUtils from "../common/ToastUtils";
import AnimViewY from "../common/AnimViewY";
import AnimViewX from "../common/AnimViewX";

const {width: sw, height: sh, scale: ss} = Dimensions.get('window');

export default class Reader extends React.Component {
    state = {
        isHiddenStatusBar: true,
    };

    static navigationOptions = {
        header: null,
    };

    render() {
        return (<View style={{flex: 1, backgroundColor: CS.gray66tran}}>
            {WidgetUtils._getStatusBar(true, this.state.isHiddenStatusBar)}
            <TouchableOpacity
                onPress={this._showLeftForBack}
                activeOpacity={1}
                style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <TouchableOpacity
                    style={{width: sw * 0.4, backgroundColor: CS.greenLight, height: sw * 0.4}}
                    onPress={this._showTop}
                    activeOpacity={CS.activeOpacity}
                >
                </TouchableOpacity>
            </TouchableOpacity>
            <AnimViewY
                startValue={0}
                // startValue={-sw * 0.155}
                endValue={0}
                duration={300}
                style={{position: 'absolute'}}
                ref={ref => this.vAnimViewY = ref}
            >
                {this._renderTop()}
            </AnimViewY>
            <AnimViewX
                // startValue={0}
                startValue={-sw * 0.6}
                endValue={0}
                duration={300}
                style={{position: 'absolute'}}
                ref={ref => this.vAnimViewX = ref}
            >
                {this._renderLeft()}
            </AnimViewX>
        </View>);
    }

    _renderLeft = () => {
        return (<TouchableOpacity
            activeOpacity={1}
            onPress={() => {
                this.vAnimViewX._backAnim()
            }}
            style={{backgroundColor: CS.white}}>
            <View style={{width: sw * 0.6, height: sh,}}>
            </View>
        </TouchableOpacity>);
    };

    _showTop = () => {
        if (JSON.stringify(this.vAnimViewY.state.animValue) != 0) {
            this.vAnimViewY._startAnim();
            this.setState({
                isHiddenStatusBar: false,
            });
        } else {
            this.vAnimViewY._backAnim();
            this.setState({
                isHiddenStatusBar: true,
            });
        }
    };

    _showLeftForBack = () => {
        if (this.vAnimViewX.isOpen == true) {
            this.vAnimViewX._backAnim();
        }
    };
    _showLeft = () => {
        if (this.vAnimViewX.isOpen == false) {
            this.vAnimViewX._startAnim();
        } else {
            this.vAnimViewX._backAnim();
        }
    };

    _renderTop = () => {
        return (<View style={{
            width: sw,
            height: sw * 0.15,
            backgroundColor: CS.backgroud,
            paddingTop: WidgetUtils.headerPaddingTop,
            flexDirection: 'row',
            alignItems: 'center'
        }}>
            <TouchableOpacity
                onPress={() => {
                    this.props.navigation.navigate('Home');
                }}
                activeOpacity={CS.activeOpacity}
                style={{
                    width: sw * 0.10,
                    height: sw * 0.09,
                    alignItems: 'center',
                    justifyContent: 'center',
                }}
            >
                <Image source={require('../icon/arrow_black.png')}
                       style={{width: sw * 0.04, height: sw * 0.04,}}/>
            </TouchableOpacity>
            <View style={{flex: 1}}/>
            {this._renderTopBtn('背')}
            {this._renderTopBtn('字')}
            {this._renderTopBtn('目', () => {
                this._showLeft();
            })}
            {this._renderTopBtn('滤', () => {
                this._showLeft();
            }, '1')}

        </View>);
    };

    _renderTopBtn = (content, callBack, color) => {
        return (<TouchableOpacity
            onPress={callBack}
            activeOpacity={CS.activeOpacity}
            style={{
                width: sw * 0.06, height: sw * 0.06,
                alignItems: 'center',
                borderRadius: 3,
                borderWidth: 1,
                marginRight: sw * 0.03,
                borderColor: color == 1 ? CS.red : CS.green,
                justifyContent: 'center',
            }}>

            <Text style={{fontSize: sw * 0.03, color:color == 1 ? CS.red : CS.green}}>{content}</Text>
        </TouchableOpacity>);
    }

}

